<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax分页</title>
    <script src="js/jquery-3.6.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 100vh;
            width: 100vw;
            box-sizing: border-box;
        }

        table {
            border-collapse: collapse;
        }

        th {
            border: 1px solid black;
        }

        td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- <a id="btn0"></a>
    <input id="pageSize" type="text" size="1" maxlength="2" value="getDefaultValue()" /><a> 条 </a> <a href="#"
        id="pageSizeSet">设置</a>&nbsp;
    <a id="sjzl"></a>&nbsp;
    <a href="#" id="btn1">首页</a>
    <a href="#" id="btn2">上一页</a>
    <a href="#" id="btn3">下一页</a>
    <a href="#" id="btn4">尾页</a>&nbsp;
    <a>转到&nbsp;</a>
    <input id="changePage" type="text" size="1" maxlength="4" />
    <a>页&nbsp;</a>
    <a href="#" id="btn5">跳转</a> -->
    <!-- <form action="ajax?name=你好" method="post"> -->
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <input type="submit" value="按钮">
    <!-- </form> -->
    <script>
        $('input').click(function () {
            $.ajax({
                type: "post",
                url: "ajax",
                dataType: "json",
                success: function (date) {
                    console.log(date);
                    add(date);
                }
            });
        });
        function add(data) {
            var trArraay = $('table tbody').children();
            for (var i = 0; i < trArraay.length; i++) {
                    trArraay[i].remove();
            }
            var dataArray = data;
            for (var i = 0; i < dataArray.length; i++) {
                var id = dataArray[i].id;
                var name = dataArray[i].name;
                var gender = dataArray[i].gender;
                var email = dataArray[i].email;
                var newNode=$("<tr><td>"+id+"</td><td>"+name+"</td><td>"+gender+"</td><td>"+email+"</td></tr>");
                $('table').append(newNode);
            }
        }
    </script>
</body>

</html>